<script lang="ts">
    import { Grid, gridHelp } from "$lib/js/svelte-grid";

    const id = () => "_" + Math.random().toString(36).substr(2, 9);

    let items = [
        {
            6: gridHelp.item({
                x: 0,
                y: 0,
                w: 2,
                h: 2,
            }),
            id: id(),
        },

        {
            6: gridHelp.item({
                x: 2,
                y: 0,
                w: 2,
                h: 2,
            }),
            id: id(),
        },

        {
            6: gridHelp.item({
                x: 4,
                y: 0,
                w: 2,
                h: 2,
            }),
            id: id(),
        },
    ];

    const cols = [[1200, 6]];
</script>

<div class="bg-gray-50">
    <Grid bind:items rowHeight={100} let:item let:dataItem {cols} gap={[2, 2]}>
        <div class="bg-green-300 border-2 h-full w-full">{dataItem.id}</div>
    </Grid>
</div>
